CSS Quick Reference

CSS stands for Cascading Style Sheets, is the language we use to style a Web page.

Cascading Style Sheets

CSS, which stands for Cascading Style Sheets, is used for describing the presentation (i.e. the layout and formatting) of the web pages. CSS handles the look and feel part of a web page. Using CSS, you can control the colorof the text, the style of fonts, the spacing between paragraphs, how columns are sized and laid out, what background images or colors are used, as well as a variety of othereffects.

CSS was introduced in 1996 by the World Wide Web Consortium (W3C), which also maintains its standard. CSS was designed to enable the separation of presentation and content. Now web designers can move the formatting information of the web pages to a separate style sheet which results in considerably simpler HTML markup, and better maintainability. CSS3 is the latest version of the CSS specification. CSS3 adds several new styling features and improvements to enhance the web presentation capabilities.

As one of the core languages of the Web, CSS is used today by almost all web sites to enhance the web experience. It has been a revolution in the World Wide Web and is a must-learn language for anyone working with web design. Like HTML, the CSS language is easy to learn and use.

What You Can Do with CSS

There are lot more things you can do with CSS.

• You can easily apply same style rules on multiple elements.
• You can control the presentation of multiple pages of a website with a single style sheet.
• You can present the same page differently on different devices.
• You can style dynamic states of elements such as hover, focus, etc. that isn't possible otherwise.
• You can change the position of an element on a web page without changing the markup.
• You can alter the display of existing HTML elements.
• You can transform elements like scale, rotate, skew, etc. in 2D or 3D space.
• You can create animations and transitions effects without using any JavaScript.
• You can create print friendly version of your web pages.

Advantages of CSS

• CSS saves time - You can write CSS once and then reuse the same sheet in multiple HTML pages. You can define a style for each HTML element and apply it to as many web pages as you want.
• Pages load faster - If you are using CSS, you do not need to write HTML tag attributes every time. Just write one CSS rule of a tag and apply it to all the occurrences of that tag. So, less code means faster download times.
• Easy maintenance - To make a global change, simply change the style, and all the elements in all the web pages will be updated automatically.
• Superior styles to HTML - CSS has a much wider array of attributes than HTML, so you can give a far better look to your HTML page in comparison to HTML attributes.
• Multiple Device Compatibility - Style sheets allow content to be optimized for more than one type of device. By using the same HTML document, different versions of a website can be presented for handheld devices such as PDAs and cellphones or for printing.
• Global web standards – Now HTML attributes are being deprecated and it is being recommended to use CSS. So it’s a good idea to start using CSS in all the HTML pages to make them compatible with future browsers.

Using HTML with CSS

In this tutorial you will learn how to apply style rules to HTML elements.

CSS provides styles to HTML elements on the page. Inline styling involves usage of the style attribute in tags, and is highly discouraged. Internal stylesheets use the <style>tag and are used to declare rules for directed portions ofthe page. External stylesheets may be used through a <link> tag which takes an external file of CSS and applies therules to the document.

• Inline styles — Using the style attribute in the HTML start tag.
• Internal styles — Using the <style> element in the head section of the document.
• External style sheet — Using the <link> element, pointing to an external CSS files.

Note: The inline styles have the highest priority, and the external style sheets have the lowest. It means if you specify styles for your paragraphs in both embedded and external style sheets, the conflicting style rules in the embedded style sheet would override the external style sheet.

A Simple HTML Document withh CSS:   Try it  

<!DOCTYPE html>
<html>
<head>
<title>My First HTML Page</title>
</head>
<body>
<h1 style ="color:blue;">Welcome!</h1>
<p>Paragraph</p>
</body>
</html>
<p>

<h1 style ="color: blue;">This is inline CSS</h2>

<h1 style ="color: blue;background-color:yellow; ">This is inline CSS</h1>

<head>
<style>
h1{
background-color: blue;
color: yellow;
}
</style>
</head>

<head>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>

p {
color:green;
}

/* This is a CSS comment */
p {
color: red; /* This is a CSS comment */
}

/*
This
is
a
CSS
comment
*/
p {
color: red;
}

p  {
color:    red;
}

<h1 style ="color: blue;">This is inline CSS</h2>

<h1 style ="color: blue;background-color:yellow; ">This is inline CSS</h1>